<script setup lang="ts">
import MySwiper from '@/components/mySwiper/index.vue'
import MoreSet from '@/components/moreSet/index.vue'
import { throttle } from 'lodash-es'
// 这是使用tabs组件的版本
definePageMeta({
  layout: 'default-home',
  title: '主页',
  i18n: 'menu.home',
})
const { t } = useI18n()
const router = useRouter()
const showPop = ref(false)
const menuList = reactive([
  { id: 0, title: "home_page.leftMenu.home", icon: 'fire-o', urls: 'img/home.png', url: 'img/un-home.png' },
  { id: 1, title: "home_page.leftMenu.favorite", icon: 'like-o', urls: 'img/love.png', url: 'img/un-love.png' },
  { id: 2, title: "home_page.leftMenu.slots", icon: 'gift-o', urls: 'img/slots.png', url: 'img/un-slots.png', logo: '' },
  { id: 3, title: "home_page.leftMenu.chess", icon: 'smile-o', urls: 'img/qp.png', url: 'img/un-qp.png', logo: '' },
  { id: 4, title: "home_page.leftMenu.fish", icon: 'gem-o', urls: 'img/by.png', url: 'img/un-by.png', logo: '' },
  { id: 5, title: "home_page.leftMenu.person", icon: 'contact-o', urls: 'img/zr.png', url: 'img/un-zr.png', logo: '' },
  { id: 6, title: "home_page.leftMenu.lottery", icon: 'balance-o', urls: 'img/cp.png', url: 'img/un-cp.png', logo: '' },
]);
// 各类游戏列表
const categoryList = ref([
  {
    id: 0,
    title: "home_page.leftMenu.favorite",
    logo: '/img/app_icon_love.png',
    gameArr: [
      {
        id: 1,
        img: '/game/avatar0.png',
        name: 'jili',
        type: 'jl',
        like: false,
      },
      {
        id: 2,
        img: '/game/avatar.png',
        name: 'luva',
        type: 'luva',
        like: true,
      },
      {
        id: 3,
        img: '/game/avatar2.png',
        name: 'QQ',
        type: 'pg',
        like: false,
      },
      {
        id: 4,
        img: '/game/avatar3.png',
        name: 'WX',
        type: 'pp',
        like: false,
      },
      {
        id: 5,
        img: '/game/avatar4.png',
        name: '方法',
        type: 'luva',
        like: false,
      },
    ]
  },
  {
    id: 1,
    title: "home_page.leftMenu.slots",
    logo: '/img/app_icon_slots.png',
    gameArr: [
      {
        id: 1,
        img: '/game/avatar0.png',
        name: 'jili',
        type: 'jl',
        like: false,
      },
      {
        id: 2,
        img: '/game/avatar1.png',
        name: 'luva',
        type: 'luva',
        like: false,
      },
      {
        id: 3,
        img: '/game/avatar2.png',
        name: 'QQ',
        type: 'pp',
        like: false,
      },
      {
        id: 4,
        img: '/game/avatar3.png',
        name: 'WX',
        type: 'pg',
        like: false,
      },
      {
        id: 5,
        img: '/game/avatar4.png',
        name: '方法',
        type: 'jl',
        like: false,
      },
    ]
  },
  {
    id: 2,
    title: "home_page.leftMenu.chess",
    logo: '/img/app_icon_qp.png',
    gameArr: [
      {
        id: 1,
        img: '/game/avatar0.png',
        name: 'jili',
        type: 'jl',
        like: false,
      },
      {
        id: 2,
        img: '/game/avatar.png',
        name: 'luva',
        type: 'luva',
        like: false,
      },
      {
        id: 3,
        img: '/game/avatar2.png',
        name: 'QQ',
        type: 'pp',
        like: false,
      },
      {
        id: 4,
        img: '/game/avatar3.png',
        name: 'WX',
        type: 'pg',
        like: false,
      },
      {
        id: 5,
        img: '/game/avatar4.png',
        name: '方法',
        type: 'luva',
        like: false,
      },
    ]
  },
  {
    id: 3,
    title: "home_page.leftMenu.fish",
    logo: '/img/app_icon_fish.png',
    gameArr: [
      {
        id: 1,
        img: '/game/avatar0.png',
        name: 'luva',
        type: 'luva',
        like: false,
      },
      {
        id: 2,
        img: '/game/avatar.png',
        name: 'jili',
        type: 'jl',
        like: false,
      },
      {
        id: 3,
        img: '/game/avatar2.png',
        name: 'QQ',
        type: 'pp',
        like: false,
      },
      {
        id: 4,
        img: '/game/avatar3.png',
        name: 'WX',
        type: 'pg',
        like: false,
      },
      {
        id: 5,
        img: '/game/avatar4.png',
        name: '方法',
        type: 'pp',
        like: false,
      },
    ]
  },
  {
    id: 4,
    title: "home_page.leftMenu.person",
    logo: '/img/app_icon_zr.png',
    gameArr: [
      {
        id: 1,
        img: '/game/avatar0.png',
        name: 'luva',
        type: 'luva',
        like: false,
      },
      {
        id: 2,
        img: '/game/avatar.png',
        name: 'pp',
        type: 'pp',
        like: false,
      },
      {
        id: 3,
        img: '/game/avatar2.png',
        name: 'QQ',
        type: 'pg',
        like: false,
      },
      {
        id: 4,
        img: '/game/avatar3.png',
        name: 'WX',
        type: 'pp',
        like: false,
      },
      {
        id: 5,
        img: '/game/avatar4.png',
        name: '方法',
        type: 'luva',
        like: false,
      },
    ]
  },
  {
    id: 5,
    title: "home_page.leftMenu.lottery",
    logo: '/img/app_icon_cp.png',
    gameArr: [
      {
        id: 1,
        img: '/game/avatar0.png',
        name: 'luva',
        type: 'luva',
        like: false,
      },
      {
        id: 2,
        img: '/game/avatar.png',
        name: 'pg',
        type: 'pg',
        like: false,
      },
      {
        id: 3,
        img: '/game/avatar2.png',
        name: 'QQ',
        type: 'luva',
        like: false,
      },
      {
        id: 4,
        img: '/game/avatar3.png',
        name: 'WX',
        type: 'pp',
        like: false,
      },
      {
        id: 5,
        img: '/game/avatar4.png',
        name: '方法',
        type: 'pg',
        like: false,
      },
    ]
  },

])
const jackpotList = reactive([
  { id: 1, title: "用户名称", gold: '999999', img: 'img/avatar.png', gameName: '游戏名称' },
  { id: 2, title: "用户名称", gold: '666666', img: 'img/avatar.png', gameName: '游戏名称' },
  { id: 3, title: "用户名称", gold: '888888', img: 'img/avatar.png', gameName: '游戏名称', },
  { id: 4, title: "用户名称", gold: '999999', img: 'img/avatar.png', gameName: '游戏名称', },
]);
const gameTab = ref([
  { id: 0, title: 'ALL', img: '/img/tab_all.png', unImg: '/img/tab_all_un.png' },
  { id: 1, title: 'ALL', img: '/img/tab_luva.png', unImg: '/img/tab_luva_un.png' },
  { id: 2, title: 'ALL', img: '/img/tab_pg.png', unImg: '/img/tab_pg_un.png' },
  { id: 3, title: 'ALL', img: '/img/tab_pp.png', unImg: '/img/tab_pp_un.png' },
  { id: 4, title: 'ALL', img: '/img/tab_jili.png', unImg: '/img/tab_jili_un.png' },
])
const menuAactive = ref(0);
const active = ref(0);
const contentItems = ref<(HTMLElement | null)[]>([])//  对应内容项
const contBox = ref<HTMLElement | null>(null)//  内容的容器
const goAnnouncement = () => {
  router.push('/home/announcement')
}
// 热门游戏数据
const swiperList = ref([
  {
    id: 1,
    img: '/game/avatar0.png',
    name: 'jili',
    type: 'jl'
  },
  {
    id: 2,
    img: '/game/avatar1.png',
    type: 'luva',
    name: 'luva'
  },
  {
    id: 3,
    img: '/game/avatar2.png',
    type: 'pp',
    name: 'QQ'
  },
  {
    id: 4,
    img: '/game/avatar3.png',
    type: 'pg',
    name: 'WX'
  },
  {
    id: 5,
    img: '/game/avatar4.png',
    type: 'luva',
    name: '方法'
  },
])
const tabContArr = ref([
  {
    id: 1,
    img: '/game/avatar0.png',
    type: 'jl',
    name: 'jili'
  },
  {
    id: 2,
    img: '/game/avatar1.png',
    type: 'luva',
    name: 'luva'
  },
  {
    id: 3,
    img: '/game/avatar2.png',
    type: 'pp',
    name: 'QQ'
  },
  {
    id: 4,
    img: '/game/avatar3.png',
    type: 'pg',
    name: 'WX'
  },
  {
    id: 5,
    img: '/game/avatar4.png',
    type: 'luva',
    name: '方法'
  },
  {
    id: 6,
    img: '/game/avatar4.png',
    type: 'pp',
    name: '好好'
  },
])
// 在组件挂载后获取子元素宽度
onMounted(() => {
  contBox.value?.addEventListener('scroll', throttle(handleScroll, 100))
})
onBeforeUnmount(() => {
  contBox.value?.removeEventListener('scroll', handleScroll)
})
const handleScroll = () => {
  if (!contBox.value) return

  const containerRect = contBox.value.getBoundingClientRect()
  const scrollTop = contBox.value.scrollTop

  for (let i = 0; i < contentItems.value.length; i++) {
    const item = contentItems.value[i]
    if (!item) continue

    const itemRect = item.getBoundingClientRect()

    // 计算 item 相对于滚动容器顶部的距离
    const itemTop = itemRect.top - containerRect.top + scrollTop
    const itemHeight = item.offsetHeight
    // 判断当前是否处于这个区块内（可加一点容错）
    // if (scrollTop >= itemTop - itemTop/4 && scrollTop < itemTop + itemHeight -itemTop/4) {
    //   menuAactive.value = i
    //   break
    // }
  }
}
const openMore = () => {
  showPop.value = true
}
const handleClickTab = (e: { name: number }) => {
  if (e.name == 0&&contBox.value) {
    contBox.value.scrollTo({
      top: 0,
      behavior: 'smooth'
    })
  }
  else {
    const element = contentItems.value[e.name - 1]
    if (element&&contBox.value) {
      contBox.value.scrollTo({
        top: element.offsetTop - element.offsetHeight / 4 * 3 + 1,
        behavior: 'smooth'
      })
    }
  }
}
const getImg=(v:string)=>{
    return  `/img/${v}.png`
}
</script>

<template>
  <div>
    <!-- 顶部logo和菜单栏 -->
    <van-sticky>
      <div class="top px-10 pt-10">
        <div class="flex items-center justify-between">
          <img src="/img/logo.png" class="w-50 h-32" alt="">
          <div class="flex items-center">
            <img src="/img/head.png" class="w-32 mx-5" alt="">
            <div class="color-#9c753b px-5 leading-none">
              <div class="color-#9c753b font-bold text-14">Name12345</div>
              <span class="text-12 ml-5">$99999999</span>
            </div>
            <img src="/img/more.png" class="w-18 ml-5" alt="" @click="openMore">
          </div>
        </div>
        <van-tabs ref="tabsRef" v-model:active="menuAactive" scrollspy class="menu-tabs text-center"
          @click-tab="handleClickTab">
          <van-tab v-for="(item, index) in menuList" :key="item.id">
            <template #title>
              <img :src="menuAactive == index ? item.urls : item.url" alt="" class="w-42 h-42" />
              <div class="text-center color-#946329"></div> {{ t(item.title) }}
            </template>
            <!-- 内容 -->
          </van-tab>
        </van-tabs>
      </div>
    </van-sticky>
    <!-- 内容区域 -->
    <div class="main p-10 " ref="contBox">
      <!-- 轮播图 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>
          <img class="w-full h-150 rounded-10" src="/img/swiper.png" />
        </van-swipe-item>
      </van-swipe>
      <!-- 消息通知栏 -->
      <van-notice-bar @click="goAnnouncement" color="#81632c" text="无论我们能活多久，我们能够享受的只有无法分割的此刻，此外别无其他。"
        background="transparent">
        <template #left-icon>
          <img src="/img/sound.png" class="w-14 h-14 mr-4" />
        </template>
      </van-notice-bar>
      <!-- 热门游戏 -->
      <div class="hot-game border-2 border-#ffea96 rounded-10 w-full  ">
        <!-- 标题 -->
        <div class="flex items-center justify-center pt-4">
          <!-- <img src="/img/hot.png" alt="" class="w-18 mr-5"> -->
          <div class="color-#411910 font-bold ">热门游戏</div>
        </div>
        <!-- 热门轮播图 -->
        <div class="px-10 py-10">
          <MySwiper v-model:items="swiperList" />
        </div>
      </div>
      <!-- JACKPOT -->
      <div class="jackpot mt-10 relative">
        <img src="/img/jackpot_top_bg.png" alt="">
        <div class="jackpot-main   overflow-hidden overflow-y-auto ">
          <!-- 顶部空白 -->
          <div class="top-img w-100% left-0 h-12 absolute top-108  text-center"></div>
          <div class="jackpot-item flex items-center justify-between p-8 rounded-10 bg-#fff9e3  leading-none"
            v-for="item in jackpotList" :key="item.id">
            <div class="flex items-center h-full">
              <img :src="item.img" alt="" class="w-60  h-60 mr-10">
              <div class="flex flex-col justify-between h-full">
                <div class="flex  items-center  mb-18">
                  <img src="/img/cup.png" alt="" class="w-15 mr-3">
                  <div class="color-#37332c text-14">{{ item.title }}</div>
                </div>
                <div class="color-#e47b00 text-12 font-bold">赢取奖金</div>
              </div>
            </div>
            <div class="text-right mr-5">
              <div class="flex  items-center  mb-15">
                <img src="/img/gold.png" alt="" class="w-15 mr-3 mb-2">
                <div class="color-#ff4e00 font-bold ">{{ item.gold }}</div>
              </div>
              <div class="color-#7f6e56 text-10">{{ item.gameName }}</div>
            </div>
          </div>
          <!-- 底部空白 -->
          <div class="bottom-img w-100% left-0 h-12 absolute bottom-0  text-center"></div>
        </div>
      </div>
      <!-- 各类游戏内容 -->
      <div>
        <div class="category-box" v-for="item in categoryList" :key="item.id" ref="contentItems">
          <div class="bg-#ffffff">
            <div class="flex items-center justify-between">
              <div class="flex items-center">
                <img :src="item.logo" alt="" class="w-30 ">
                <div class="color-#614646 font-bold text-14">{{ t(item.title) }}</div>
              </div>
              <div class="flex items-center">
                <div class="color-#b0aeae text-14"> 查看所有</div>
                <img src="/img/arrow.png" alt="" class="w-6 ml-5">
              </div>
            </div>
            <MySwiper v-model:items="item.gameArr" class="pt-10 pb-0" />
          </div>
        </div>
      </div>
      <!-- 横向滚动 -->
      <van-tabs v-model:active="active" swipeable class="tabs">
        <van-tab v-for="(item, index) in gameTab" :key="item.id">
          <template #title>
            <img :src="active == index ? item.img : item.unImg" alt="" class="w-72 h-24">
          </template>
          <div class="tab-item">
            <div v-for="item in tabContArr" :key="item.id" class="relative">
              <img :src="getImg(item.type)" alt="" class="w-30 h-30 absolute left-0">
              <img src="/img/sc_bg.png" alt="" class="w-20 h-20 absolute right-5">
              <img  @click="item.like=!item.like" :src="item.like?'/img/sc.png':'/img/sc_un.png'" alt="" class="w-14 h-14 absolute right-10 top-3">
              <img :src="item.img" alt="" class="w-100  h-100 rounded-10">
              <div class="color-#300808 text-14 text-center">{{ item.name }}</div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <MoreSet v-model="showPop" />
  </div>
</template>
<style lang="css" scoped>
/* 隐藏滚动条（可选） */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.top-img {
  background: url('/img/top.png') no-repeat;
  background-size: 100% 100%;
  /* background-size: cover; */
}

.bottom-img {
  background: url('/img/bottom_img.png') no-repeat;
  background-size: 100% 100%;
  /* background-size: cover; */
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}

::v-deep .van-popup {
  background: url('/img/long_bg.png') no-repeat;
  background-size: 100% 100%;
}

:v-deep.van-switch__node {
  background: #fff2c2 !important;
}

.top {
  background: url('/img/top_bg.png') no-repeat;
  background-size: 100% 100%;
}

::v-deep .menu-tabs.van-tabs--line .van-tabs__wrap {
  height: 90px;
}

::v-deep .menu-tabs .van-tabs__nav {
  background: transparent;
}

::v-deep .menu-tabs .van-tab--active {
  color: #300808;
}

.main {
  background: url('/img/main_bg.png') no-repeat;
  background-size: 100% 100%;
  overflow-y: auto;
  max-height: calc(100vh - 120px);
}

.cont-box {
  /* max-height: calc(100vh - 120px); */
  /* 根据实际顶部 menu 高度调整 */
  /* overflow-y: auto; */
  position: relative;
}

.menu-container {
  display: flex;
  overflow-x: auto;
  /* 启用横向滚动 */
  white-space: nowrap;
  /* 防止换行 */
  -webkit-overflow-scrolling: touch;
  /* 在 iOS 上更流畅 */
  scrollbar-width: none;
  /* 可选：隐藏滚动条 */
  margin-top: 20px;
  padding-bottom: 8px;
}

.menu-container::-webkit-scrollbar {
  display: none;
  /* 可选：隐藏滚动条 */
}

.menu-item {
  flex: 0 0 auto;
  width: calc(20% - 11px);
  text-align: center;
  background-size: 100% 100%;
  box-sizing: border-box;
}

.active-menu-item {
  background: url('/img/menu-bg.png') no-repeat center center;
  background-size: 100% 100%;
  color: #39110b;
}

::v-deep .van-notice-bar {
  padding: 0;
}

.hot-game {
  background: url("/img/hot_bg.png");
  background-size: 100% 100%;
}

.hot-box {
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 8px;
}

.hot-item {
  flex: 0 0 auto;
  border-radius: 10px;
  width: calc(33.33% - 6px);
  text-align: center;
  background-size: 100% 100%;
  box-sizing: border-box;
  margin-right: 10px;
}

.hot-item:last-child {
  margin-right: 0;
}

.jackpot-main {
  box-sizing: border-box;
  background: url('/img/jackpot_bg.png') no-repeat;
  background-size: 100% 100%;
  /* background-size: cover; */
  padding: 10px 15px;
  height: 300px;
  scroll-padding: 10px;
  -webkit-overflow-scrolling: touch;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}

.jackpot-item {
  background: url('/img/item-border.png') no-repeat;
  background-size: 100% 100%;
  margin-bottom: 10px;
}

.category-box {
  border: 10px solid transparent;
  /* 边框宽度 = 图片切图中的边角大小 */
  border-image-source: url('/img/border_box.png');
  background-size: 100% 100%;
  /* padding: 15px; */
  margin: 10px 0;
  border-image-slice: 10;
  /* 切分九宫格的像素值，和上面 border-width 一致 */
  border-image-repeat: stretch;
  /* 拉伸模式，也可以是 round / repeat / space */
}

.tabs.van-tabs {
  border: 10px solid transparent;
  /* 边框宽度 = 图片切图中的边角大小 */
  border-image-source: url('/img/border_box.png');
  background-size: 100% 100%;
  /* padding: 15px; */
  margin: 10px 0;
  border-image-slice: 10;
  /* 切分九宫格的像素值，和上面 border-width 一致 */
  border-image-repeat: stretch;
}

::v-deep .van-tabs__line {
  background: transparent;
}

.tabs .tab-item {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  background: #ffffff;
}

::v-deep .tabs .van-swipe-item .van-tab__panel-wrapper {
  background: #ffffff;
}
</style>